<template>
   <div class='icons'>
        <div class="icons1" v-if="iconsList">
            <div class="items" v-for="(item,index) in iconsList.results" :key="index">
                    <img :src="item.imgUrl" />
                    <p>{{item.title}}</p>
            </div>
        </div>
         <div class='bottomMark'>
             <div class='botton-container'
             :style="activeStyle" ></div>
         </div>
	</div>
</template>
<script>
import {mapState,mapActions} from "vuex"; 
export default {
    components:{

    },
    data(){
        return {
            screen:document.documentElement.clientWidth || document.body.clientWidth,//可视区域宽度
            docWidth:750, //大盒子文档宽度
            markWidth:100, //灰色的条
            markMinWidth:0 , //红色的条
            startX:0,  //最终滚动条移动的距离
            leftX: 0, //最终滚动条移动的距离
            endX:0 //结束 离开的时候的当前位置
        }
    },
    computed:{
        ...mapState(['iconsList']),
        activeStyle(){
            return {
                width:this.markWidth+"px",
                left:this.leftX+"px"
            }
        }
    },
    methods:{
      ...mapActions(['getIconsFn']),
      getBottomMark(){
          this.markMinWidth=(this.screen / this.docWidth * this.markWidth)
      },
      touchStart(e){
          this.startX=e.touches[0].pageX;
      },
      touchMove(e){
          let left=e.touches[0].pageX;
          let moveX=left-this.startX;
          this.leftX=-(this.markWidth / this.docWidth * moveX)+this.endX;
          if(this.leftX<0){
              this.leftX=0;
          }else if(this.leftX>this.markWidth-this.markMinWidth){
              this.leftX=this.markWidth-this.markMinWidth;
          }
      },
      touchEnd(){
          this.endX=this.leftX;
      }
    },
    created(){
       this.getIconsFn()
    },
    mounted(){
          //console.log(this.$el)
          this.getBottomMark();
          this.$el.addEventListener("touchstart",this.touchStart,false)
          this.$el.addEventListener("touchmove",this.touchMove,false)
          this.$el.addEventListener("touchend",this.touchEnd,false)
    }
}
</script>
<style scoped lang="scss">
@import "~@/scss/common.scss";
.icons{
    width:100%;
    height:pxTorem(140px);
    margin-top:4px;
    overflow-x:auto;
    position: relative;
    &::-webkit-scrollbar{
	     display: none;
    } 
    .icons1{
        width:pxTorem(750px);
        height:pxTorem(140px);
        display:flex;
        align-items:center;
        flex-wrap:wrap;
       .items{
           width:pxTorem(75px);
           height:pxTorem(70px);
           text-align: center;
           display:flex;
           align-items:center;
           justify-content:center;
           flex-direction:column;
           img{
               width:pxTorem(39px);
               height:pxTorem(39px);
           }
           p{
               padding:pxTorem(2px) 0;
           }
       }
     }
     .bottomMark{
         width:pxTorem(50px);
         height:pxTorem(2px);
         background:#ccc;
         margin-top:4px;
         position: absolute;
         bottom:3px;
         margin-left:pxTorem(140px);
         .botton-container{
            width:pxTorem(25px);
            height:pxTorem(2px);
            position: relative;
            left:0;
            top:0;
            background: red;
        }
     }
}
</style>